<template>
  <div id="appVue" class="wrapper">
    <div class="container-fluid page-content" style="margin-top: 10px;">
			<!-- <div id="pageHeader">微信对话生成器</div> -->
			<div class="edit-content">
				<!-- tab -->
				<div class="tab">
					<ul class="nav nav-tabs">
						<li><a data-tab >外观设置</a></li>
						<li class="active"><a data-tab >对话设置</a></li>
					</ul>
					<div class="tab-content">
						<!-- 外观设置 -->
						<div class="tab-pane" id="tabContent1">
							<div class="view-setting">
								<div class="view-set-item">
									<span>手机信号：</span>
									<select v-model="phone.single" class="form-control">
										<option value="1">1格</option>
										<option value="2">2格</option>
										<option value="3">3格</option>
										<option value="4" selected="selected">4格</option>
									</select>
								</div>
								<div class="view-set-item">
									<span>网络信号：</span>
									<select v-model="phone.wifi" class="form-control">
										<option value="1">wifi</option>
										<option value="2">3G</option>
										<option value="3">4G</option>
										<option value="4">5G</option>
									</select>
								</div>
								<div class="view-set-item">
									<span>wifi信号：</span>
									<select v-model="phone.wifi_single" class="form-control">
										<option value="1">1格</option>
										<option value="2">2格</option>
										<option value="3" selected="selected">3格</option>
									</select>
								</div>
								<div class="view-set-item">
									<span>手机时间：</span>
									<select v-model="phone.time_hour" class="form-control edit-phone-time-hour">
										<option v-for="(time,index) in phone.time_hour_text" :value="time" :key="index">{{time}}</option>
									</select>
									<select v-model="phone.time_mini" class="form-control edit-phone-time-mini">
										<option v-for="(time,index) in phone.time_mini_text" :value="time" :key="index">{{time}}</option>
										
									</select>
								</div>
								<div class="view-set-item">
									<span>充电中：</span>
									<label class="my-radio"><input type="radio" name="charge" v-model="phone.battery_charge" value="1"> 是</label>
									<label class="my-radio"><input type="radio" name="charge" v-model="phone.battery_charge" value="0" checked> 否</label>
								</div>
								<div class="view-set-item">
									<span>主题色：</span>
									<label class="my-radio"><input type="radio" name="theme" v-model="themecolor" value="light"> 白天</label>
									<label class="my-radio"><input type="radio" name="theme" v-model="themecolor" value="dark" checked> 夜晚</label>
								</div>
								<div class="view-set-item">
									<span>手机电量：</span>
									<input @change="onBatteryChange($event)" type="range" v-model="phone.battery_amount"
										min="0" max="100" value="50" />
									&nbsp;&nbsp;&nbsp;{{phone.battery_amount}}%
								</div>
								<div class="view-set-item">
									<span>听筒模式：</span>
									<label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="1"> 是</label>
									<label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="0" checked> 否</label>
								</div>
								<div class="view-set-item">
									<span>消息数目：</span>
									<input type="number" name="phone-msg-count" class="form-control" v-model.number="setting.message">
								</div>
								<div class="view-set-item">
									<span>聊天标题：</span>
									<input type="text" class="form-control" v-model="setting.tittle">
								</div>
								<div class="view-set-item">
									<span>语音模式：</span>
									<label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="1"> 是</label>
									<label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="0" checked> 否</label>
								</div>
								<div class="view-set-item">
									<span>聊天背景：</span>
									<a class="a-phone-set-bg" href="javascript:;" title="选择背景图">
										<font>+</font>
										<img class="img-phone-set-bg" :src="setting.background" />
										<input @change="setBackground($event)" type="file" />
										<span @click="deleteBackground" v-if="setting.background != ''">x</span>
									</a>
								</div>
							</div>
						</div>
						<!-- 对话设置 -->
						<div class="tab-pane active" id="tabContent2">
							<div class="dialog-user">
								<div class="dialog-user-title">编辑和选择用户（<font>第一个用户默认是自己，点击头像可更换头像哦</font>）</div>
								<div class="dialog-user-items">
								
									<div class="dialog-user-item el-remove">
										<div class="dialog-user-face">
											<a class="dialog-user-face-a" href="javascript:;">
												<input type="file" placeholder="点击更换头像">
												<i></i>
											</a>
											<input type="text" value="微信对话生成器" />
											<a class="dialog-user-select">选择用户</a>
											<a class="dialog-user-delete">x</a>
										</div>
									</div>

									<div class="dialog-user-item el-remove">
										<div class="dialog-user-face">
											<a class="dialog-user-face-a" href="javascript:;">
												<input type="file" placeholder="点击更换头像">
												<i style="background-color: black;"></i>
											</a>
											<input type="text" value="马先生" />
											<a class="dialog-user-select">选择用户</a>
											<a class="dialog-user-delete">x</a>
										</div>
									</div>

									<div v-for="(user, index) in users" class="dialog-user-item" :key="index">
										<div class="dialog-user-face">
											<a class="dialog-user-face-a" href="javascript:;">
												<input @change="setUserImage($event,index)" type="file"
													placeholder="点击更换头像">
												<i :style="{backgroundImage:'url('+user.user_face_path+')'}"></i>
											</a>
											<input type="text" v-model="user.name" />
											<a @click="selectUser(index)"
												:class="['dialog-user-select', {'dialog-user-selected':user.selected}]">选择用户</a>
											<a v-if="!user.is_me" @click="delUser(index)" class="dialog-user-delete"
												title="删除用户">x</a>
										</div>
									</div>
									<div class="dialog-user-item">
										<a @click="addUser" class="dialog-user-item-add" href="javascript:;"
											title="添加用户">+</a>
									</div>
								</div>

								<div class="dialog-user-content-title">发送人：{{ getSender}}</div>
								<div class="dialog-user-content">
									<div class="dialog-user-content-panel">
										<textarea v-model="setting.dialog_content"
											class="edit-dialog-text form-control"></textarea>
									</div>
									<div class="view-setting view-setting2">
										<div class="view-set-item">
											<span>红包或转账金额：</span>
											<input v-model.number="setting.dialog_money" type="number"
												class="form-control">
										</div>
										<div class="view-set-item">
											<span>添加聊天时间：</span>
											<select v-model="setting.date_year"
												class="form-control edit-phone-time-year">
												<option value="" >-</option>
												<option v-for="(year,index) in timeProduList(2023,2007)" :value="year" :key="index">{{year+'年'}}</option>
											</select>
											<select v-model="setting.date_month"
												class="form-control edit-phone-time-month" style="width: 60px;">
												<option value="">-</option>
												<option v-for="(month,index) in timeProduList(12,1)" :value="month" :key="index">{{month+'月'}}</option>
											</select>
											<select v-model="setting.date_day" class="form-control edit-phone-time-day" style="width: 60px;">
												<option value="">-</option>
												<option
													v-for="(day,index) in timeProduList(31,1,setting.date_month)" 
													:value="day" 
													:key="index">{{day+'日'}}
												</option>
											</select>
											<select v-model="setting.date_xinqi" class="form-control">
												<option value="">-</option>
												<option value="星期一">星期一</option>
												<option value="星期二">星期二</option>
												<option value="星期三">星期三</option>
												<option value="星期四">星期四</option>
												<option value="星期五">星期五</option>
												<option value="星期六">星期六</option>
												<option value="星期日">星期日</option>
											</select>
											<select v-model="setting.date_shiduan" class="form-control"
												style="width: 60px;">
												<option value="">-</option>
												<option value="上午">上午</option>
												<option value="下午">下午</option>
												<option value="凌晨">凌晨</option>
											</select>
											<select v-model="setting.date_hour"
												class="form-control edit-phone-time-hour" style="width: 60px;">
												<option value="">-</option>
												<option v-for="(hour,index) in timeProduList(23,0)" :value="hour" :key="index">{{hour+'时'}}</option>
											</select>
											：
											<select v-model="setting.date_min" class="form-control edit-phone-time-mini"
												style="width: 60px;">
												<option value="">-</option>
												<option v-for="(min,index) in timeProduList(59,0)" :value="min" :key="index">{{min+'分'}}</option>
											</select>
										</div>
										<div class="view-set-item">
											<span>语音时间：</span>
											<input v-model.number="setting.dialog_voice" type="number"
												class="form-control">
											&nbsp;&nbsp;&nbsp;
											<label>是否已读：</label>
											<label class="my-radio"><input type="radio"
													v-model="setting.dialog_voice_isread" value="1" checked>
												是</label>
											<label class="my-radio"><input type="radio"
													v-model="setting.dialog_voice_isread" value="0"> 否</label>
										</div>
										<div class="view-set-item">
											<span>红包备注：</span>
											<input v-model="setting.dialog_repacket_remark" type="text"
												class="form-control">
										</div>
										<div class="view-set-item">
											<span>转账备注：</span>
											<input v-model="setting.dialog_trans_remark" type="text"
												class="form-control">
										</div>
									</div>
									<div class="btn-groups">
										<div class="btn-group">
											<button @click="addTextDialog" class="btn btn-success">添加文字对话</button>
											<button @click="addNoticeDialog" class="btn btn-primary">添加时间</button>
											<button class="btn btn-primary btn-send-image">添加图片对话<input
													@change="addImageDialog($event)" type="file"></button>

										</div>
										<div class="btn-group">
											<button @click="addVoiceDialog" class="btn btn-primary">添加语音对话</button>
											<button @click="addRedpacketDialog" class="btn btn-primary">添加红包对话</button>
											<button @click="addTransferDialog" class="btn btn-primary">添加转账对话</button>
										</div>
									</div>
									<button class="btn-clear" @click="cleanDialogs" href="javascript:;">清空聊天内容</button>
									<button class="btn-clear" @click="save" href="javascript:;">生成图片</button>
									<button class="btn-clear" @click="downloadDataToLocal(0)">下载图片</button>&nbsp;
									<button class="btn-clear" @click="downloadDataToLocal(1)">下载视频</button>
									<div style="margin-top: 20px;">
										<p>生成视频功能: 点击下方的"开始录制"按钮即可录制视频（停止录制后会在右侧生成视频，您可以下载该视频）</p>
										<!-- <p>生成GIF图片: 点击下方的"开始录制"按钮即可生成动态图片（停止录制后点击上方的"生成GIF"按钮下载GIF图片）</p> -->
									</div>
									<button class="btn-recording" id="btn-start-recording" @click="startRecorder">开始录制</button>
									<button class="btn-recording" id="btn-stop-recording" disabled>停止录制</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- phone -->
				<div class="phone-wrap" id="element-to-record">
					<div class="phone-content">
						<div id="phone" class="phone">
							<div class="phone-top">
								<div class="phone-bar">
									<div class="phone-time">{{phone.time_hour}}:{{phone.time_mini}}</div>
									<div
										:class="['phone-sigle', {'phone-sigle-v1':phone.single == 1,'psv1':themecolor=='dark'}, {'phone-sigle-v2':phone.single == 2,'psv2':themecolor=='dark'}, {'phone-sigle-v3':phone.single == 3,'psv3':themecolor=='dark'}, {'phone-sigle-v4':phone.single == 4,'psv4':themecolor=='dark'}]">
										信号
									</div>
									<div
										:class="['phone-wifi', {'phone-wifi-v2':phone.wifi > 1,'pw3':themecolor=='dark','pw2':themecolor=='dark','pw1':themecolor=='dark'}, phone.wifi == 1 ? 'phone-wifi-s' + phone.wifi_single : '']">
										<template v-if="phone.wifi == 1">
											wifi
										</template>
										<template v-else-if="phone.wifi == 2">
											3G
										</template>
										<template v-else-if="phone.wifi == 3">
											4G
										</template>
										<template v-else-if="phone.wifi == 4">
											5G
										</template>
									</div>
									<div :class="['phone-battery', {'phone-battery-charge':phone.battery_charge == 1,'bp':themecolor=='dark'}]">
										<span>
											<font :style="[{width: phone.battery_amount + '%'}]">电量</font>
											<i :class="{'pbci':themecolor=='dark'}"></i>
										</span>
									</div>
								</div>
								<div class="phone-nav">
									<div class="phone-nav-left">
										<div :class="['phone-nav-back',{'nb2':themecolor=='dark'}]">返回</div>
										<span v-if="setting.message && setting.message > 0">{{setting.message}}</span>
									</div>
									<div class="phone-nav-center">
										<span>
											<font>{{setting.tittle}}</font>
											<i v-if="phone.ear == 1" :class="{'psi':themecolor=='dark'}"></i>
										</span>
									</div>
									<div class="phone-nav-right">
										<div :class="['phone-nav-more',{'nm2':themecolor=='dark'}]">更多</div>
									</div>
								</div>
							</div>

							<div class="phone-bg">
								<img @load="onBackgroundLoad($event)" :src="setting.background" />
							</div>

							<div class="phone-water"></div>

							<div class="phone-body">
								<div class="wechat-content" >
									<div v-for="(dialog, index) in dialogs"  :class="['wechat-dialog', {'wechat-dialog-right':dialog.is_me}]" :key="index">
										
										<div v-if="dialog.type != 'notice'" class="wechat-dialog-face">
											<img :src="dialog.user_face" />
										</div>

										<div v-if="dialog.type == 'text'" class="wechat-dialog-text">{{dialog.content}}</div>

										<div v-if="dialog.type == 'image'"
											:class="['wechat-dialog-text', 'wechat-dialog-image', {'wechat-dialog-image-noborder':setting.background != ''}]">
											<img :src="dialog.image">
										</div>

										<div v-if="dialog.type == 'voice'" class="wechat-dialog-text wechat-dialog-voice">
											<div v-if="dialog.is_me"
												:style="{width: getVoiceLength(dialog.time)+ 'px'}"></div>
											<span v-if="dialog.is_me">{{dialog.time}}"</span>
											<i></i>
											<span v-if="!dialog.is_me">{{dialog.time}}"</span>
											<div v-if="!dialog.is_me"
												:style="{width: getVoiceLength(dialog.time) + 'px'}"></div>
											<em v-if="!dialog.is_me && dialog.isread == '0'"></em>
										</div>

										<div v-if="dialog.type == 'notice'" class="wechat-dialog-notice">
											<span
												:class="[{'wechat-dialog-notice-has-bg':setting.background != ''},{'wechat-dialog-notice-system':dialog.is_system}]"
												v-html="dialog.content"></span>
										</div>

										<div v-if="dialog.type == 'transfer' || dialog.type == 'redpacket'"
											:class="['wechat-dialog-text', 'wechat-dialog-trans', {'wechat-dialog-trans-get':dialog.is_get}]">
											<div
												:class="['wechat-dialog-trans-content', {'wechat-dialog-redp-content':dialog.type == 'redpacket'}]">
												<i></i>
												<div>
													<span
														v-if="dialog.type == 'transfer'">¥{{moneyFormat(dialog.money)}}</span>
													<font v-if="dialog.type == 'transfer'">{{dialog.remark}}
													</font>
													<span
														v-if="dialog.type == 'redpacket'">{{dialog.remark}}</span>
													<font v-if="dialog.type == 'redpacket' && dialog.is_get">
														已领取</font>
												</div>
											</div>
											<div class="wechat-dialog-trans-bottom">
												<span v-if="dialog.type == 'transfer'">微信转账</span>
												<span v-if="dialog.type == 'redpacket'">微信红包</span>
											</div>
										</div>

										<a @click="deleteDialog(index)" class="a-wechat-dialog-del"
											href="javascript:;" title="删除对话">X</a>

										<div v-if="!dialog.is_get && dialog.type == 'redpacket'"
											class="a-wechat-dialog-menu">
											<a @click="redpacketGet(index)">领取</a>
										</div>

										<div v-if="!dialog.is_get && dialog.type == 'transfer'"
											class="a-wechat-dialog-menu">
											<a @click="transferGet(index)">领取</a>
										</div>
									</div>
									<!-- <div v-for="(dialog, index) in dialogs"  :class="['wechat-dialog', {'wechat-dialog-right':dialog.is_me}]" :key="index"></div> -->
								</div>
							</div>

							<div class="phone-bottom">
								<div class="phone-bottom-chat">
									<div class="wechat-bottom">
										<div
											:class="['wechat-bottom-icon', 'wechat-voice-icon', {'wechat-voice-say-icon':setting.voice == 1,'wvi':themecolor=='dark','wvsi':themecolor=='dark'}]">
											语音</div>
										<div :class="['wechat-input', {'wechat-input-say':setting.voice == 1,'wi':themecolor=='dark'}]">
											<template v-if="setting.voice == 1">按住 说话</template>
											<template v-else>输入框</template>
										</div>
										<div :class="['wechat-bottom-icon' ,'wechat-emoji-icon',{'wei':themecolor=='dark'}]">表情</div>
										<div :class="['wechat-bottom-icon' ,'wechat-more-icon',{'wmi':themecolor=='dark'}]">更多功能</div>
									</div>
								</div>
								<div class="phone-bottom-bar">
									<i :class="{'bbi':themecolor=='dark'}">返回桌面</i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="image-docker" class="image-mask" v-show="show">
					
					<font @click="show=false">X</font>
					<canvas></canvas>
				</div>
				<div style="display: none; margin-left: 10px;">
					<video width="780" height="1688" style="width: 390px; height: 844px;" controls autoplay playsinline id="preview-video"></video>
				</div>
				<canvas width="780" height="1688" id="background-canvas" style="position: absolute; left: -9999px;width: 390px; height: 844px;"></canvas>
			</div>
	</div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  name: 'appVue',
  components: {
  },
  data(){
	return{
		themecolor:'light',
		phone:{
			single:4,
			wifi:1,
			wifi_single:3,
			time_hour:'05',
			time_hour_text:[
				'00','01','02','03','04','05',
				'06','07','08','09','10','11',
				'12','13','14','15','16','17',
				'18','19','20','21','22','23',
			],
			time_mini:'30',
			time_mini_text:[
				'00','01','02','03','04','05',
				'06','07','08','09','10','11',
				'12','13','14','15','16','17',
				'18','19','20','21','22','23',
				'24','25','25','27','28','29',
				'30','31','32','33','34','35',
				'36','37','38','39','40','41',
				'42','43','44','45','46','47',
				'48','49','50','51','52','53',
				'54','55','56','57','58','59',
			],
			battery_charge:1,
			battery_amount:50,
			ear:0,
			
		},
		users:[
		{
			name:'小帅',
			is_me:true,
			user_face_path:require('./assets/images/user-face.png'),
			selected:true
		},
		{
			name:'布谷',
			is_me:false,
			user_face_path:require('./assets/images/user-face.png'),
			selected:false
		},
		],
		setting:{
			message:'',
			voice:1,
			tittle:'',
			background:'',
			dialog_content:'你好',
			dialog_money:'88',
			date_year:'',
			date_month:'',
			date_day:'',
			date_xinqi:'',
			date_shiduan:'',
			date_hour:12,
			date_min:2,
			dialog_voice:'1',
			dialog_voice_isread:0,
			dialog_repacket_remark:'恭喜发财，大吉大利',
			dialog_trans_remark:'',
		},
		show:false,
		selectIndex:null,
		dialogs:[
		// {
		// 	is_me:null,
		// 	type:'text',
		// 	user_id:'',
		// 	content:'asdasd',
		// 	image:'',
		// 	time:'',
		// 	isread:'',
		// 	is_system:false,
		// 	is_get:'',
		// 	money:'',
		// 	remark:'',
		// }
		],
		resource:['','']
	}
  },
  methods:{
	//读取聊天背景
	setBackground(event){
		var _this=this;
		let file=event.target.files[0];
		//获取上传文件
		let reader=new FileReader();
		reader.onload=function(){
			_this.setting.background=reader.result;
		}
		reader.readAsDataURL(file)
	},
	//
	onBackgroundLoad(){

	},
	deleteBackground(){
		this.setting.background='';
	},
	getObjectURL(file){
		let url=null;
		if(window.createObjectURL!=undefined)
		{
			url=window.createObjectURL(file);
		}
		else if(window.URL !=undefined)
		{
			url=window.URL.createObjectURL(file);
		}
		else if(window.webkitURL !=undefined){
			url=window.webkitURL.createObjectURL(file);
		}
		return url;
	},
	setUserImage(event,index){
		let user_face=event.target.parentNode.childNodes[1];
		let file=event.target.files[0];
		//获取上传文件
		let path=this.getObjectURL(file);
		this.users[index].user_face_path=path;
		user_face.style.backgroundImage='url('+path+')';
		// console.log(path);
	},
	addUser(){
		let user={
			name:'微信用户',
			is_me:false,
			user_face_path:require('./assets/images/user-face.png'),
			selected:false
		}
		if(!this.users[0])user.is_me=true;
		this.users.push(user);
		// console.log(this.users);
	},
	selectUser(index){
		for(let i=0;i<this.users.length;i++){
			this.$set(this.users[i],'selected',false)
		}
		this.$set(this.users[index],'selected',true)
	},
	delUser(index){
		this.users.splice(index,1);
		if(this.users[0])this.users.is_me=true
	},
	timeProduList(start,end,month=1){
		let list=[];
		if(month==2){
			start-=3
		}
		if(month==4||month==6||month==8||month==10||month==11){
			start-=1
		}

		for(let i=start;i>=end;i--){
			list.push(i);
		}
		return list;
	},
	addTextDialog(){
		let TextDialog={
			user_name:this.users[this.selectIndex].name,
			user_face:this.users[this.selectIndex].user_face_path,
			is_me:this.users[this.selectIndex].is_me,
			type:'text',
			content:this.setting.dialog_content,

		};
		this.dialogs.push(TextDialog);
	},
	addNoticeDialog(){
		let NoticeDialog={
			type:'notice',
			content:this.getTime,
			is_system:true,

		};
		this.dialogs.push(NoticeDialog);
	},
	addImageDialog(event){
		//获取上传文件
		let _this=this;
		let file=event.target.files[0];
		let reader=new FileReader();
		reader.onload=function(){
			let ImageDialog={
			type:'image',
			image:reader.result,
			is_me:_this.users[_this.selectIndex].is_me,
			user_name:_this.users[_this.selectIndex].name,
			user_face:_this.users[_this.selectIndex].user_face_path,
			}
			_this.dialogs.push(ImageDialog);
		}
		reader.readAsDataURL(file)
	},
	addVoiceDialog(){
		let VoiceDialog={
			type:'voice',
			user_name:this.users[this.selectIndex].name,
			user_face:this.users[this.selectIndex].user_face_path,
			is_me:this.users[this.selectIndex].is_me,
			time:this.setting.dialog_voice,
			isread:this.setting.dialog_voice_isread
		};
		this.dialogs.push(VoiceDialog);
	},
	addRedpacketDialog(){
		let RedpacketDialog={
			type:'redpacket',
			is_me:this.users[this.selectIndex].is_me,
			user_name:this.users[this.selectIndex].name,
			user_face:this.users[this.selectIndex].user_face_path,
			is_get:false,
			remark:this.setting.dialog_repacket_remark,
		};
		this.dialogs.push(RedpacketDialog);
	},
	addTransferDialog(){
		let TransferDialog={
			type:'transfer',
			is_me:this.users[this.selectIndex].is_me,
			user_name:this.users[this.selectIndex].name,
			user_face:this.users[this.selectIndex].user_face_path,
			is_get:false,
			remark:this.setting.dialog_trans_remark,
			money:this.setting.dialog_money
		};
		this.dialogs.push(TransferDialog);
	},
	cleanDialogs(){
		this.dialogs=[];
	},
	save(){
		let dom=document.querySelector('#image-docker')
		// let img=dom.firstChild;
		let _this=this;
		const opt={
			width:390,
			height:844,
			useCORS:true,
			imageTimeout:1500,
			removeContainer:true,
			scale:2,
			dpi:300
		};
		setTimeout(() => {
			html2canvas(document.querySelector('#element-to-record'),opt).then(canvas=>{
			// canvas.style.transform='scale(0.7,0.7)'
			dom.childNodes[1].remove();
			dom.appendChild(canvas);
			_this.resource[0]=canvas.toDataURL();
			_this.show=true
			})
		}, 300);
	},
	// 开始录制
	startRecorder () {
		var data = []
		let _this=this
		var _canvas = document.getElementById('background-canvas')
		// 创建一个MediaStream
		const stream = _canvas.captureStream()
		// 创建一个对指定的MediaStream进行录制的MediaRecorder
		const recorder = new MediaRecorder(stream, {mimeType: 'video/webm'})
		// 录像结束后的回调，写入数据
		recorder.ondataavailable = function (event) {
			if (event.data && event.data.size) {
			data.push(event.data)
			}
		}
		// 监听录制结束
		recorder.onstop = () => {
			const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
			let video=document.querySelector("#preview-video")
			video.src = url;
			_this.resource[1]=url
			video.parentNode.style.display='block'

		}
		recorder.start()
		let stopBut=document.getElementById('btn-stop-recording')

		stopBut.disabled=false
		let img=new Image();
		const opt={
			width:390,
			height:844,
			useCORS:true,
			imageTimeout:1000,
			removeContainer:true,
			// foreignObjectRendering:true,
			scale:2,
			dpi:300
		}
		let timer=setInterval(() => {
			html2canvas(document.querySelector('#element-to-record'),opt).then(canvas=>{
			img.src=canvas.toDataURL();
			img.onload=function(){
				_canvas.getContext('2d').drawImage(this,0,0)
			}
			})
		}, 100);
		stopBut.addEventListener('click',()=>{
				recorder.stop();
				clearInterval(timer);
				stopBut.disabled=true
		})
	},
	downloadDataToLocal(index){
		if(this.resource[index]!=''){
			let a=document.createElement('a')
			a.href=this.resource[index]
			a.setAttribute('download',index==0?'finash':'finash')
			a.click()
			a.remove();
		}
		else alert('无文件')
	},
	getVoiceLength(num){
		if(num>=60)
			return 420;
		else
			return num*7
	},
	moneyFormat(num){
		let money=parseFloat(num).toFixed(2)
		return money;
	},
	deleteDialog(index){
		this.dialogs.splice(index,1)
	},
	redpacketGet(index){
		this.dialogs[index].is_get=true
	},
	transferGet(index){
		this.dialogs[index].is_get=true
		this.dialogs[index].remark='已被领取'
		let TransferDialog={
			type:'transfer',
			user_name:this.users[1].name,
			user_face:this.users[1].user_face_path,
			is_get:true,
			is_me:!this.dialogs[index].is_me,
			remark:'已收款',
			money:this.dialogs[index].money
		};
		this.dialogs.push(TransferDialog);

	},
  },
  computed:{
	getSender(){
		let name='';
		this.users.forEach((user,index)=>{
			if(user.selected===true)
			{
				name=user.name;
				this.selectIndex=index;
			}
		})
		return name;
	},
	getTime(){
		let time='';
		if(this.setting.date_year)
		time+=this.setting.date_year+'年';

		if(this.setting.date_month)
		time+=this.setting.date_month+'月';

		if(this.setting.date_day)
		time+=this.setting.date_day+'日 ';

		if(this.setting.date_xinqi)
		time+=this.setting.date_xinqi+' ';

		if(this.setting.date_shiduan)
		time+=this.setting.date_shiduan;

		if(this.setting.date_hour)
		time+=this.setting.date_hour+':';

		if(this.setting.date_min)
		time+=this.setting.date_min<10?'0'+this.setting.date_min:this.setting.date_min;

		return time;
	}
  },
  watch:{
	themecolor:{
		handler(val,oldval){
			let root=document.documentElement.style;
			if(val=='dark'||oldval=='light'){
				root.setProperty(`--bgcolor`,'#232323')
				root.setProperty(`--color`,'#d5d5d5')
				root.setProperty(`--tittle`,'snow')
				root.setProperty(`--colorR`,'#000')
				root.setProperty(`--textbgL`,'#2b2b2b')
				root.setProperty(`--textbgR`,'#3eb575')
			}
			else{
				root.setProperty(`--bgcolor`,'#ededed')
				root.setProperty(`--color`,'#2b2b2b')
				root.setProperty(`--tittle`,'black')
				root.setProperty(`--colorR`,'black')
				root.setProperty(`--textbgL`,'#fff')
				root.setProperty(`--textbgR`,'#98e970')
			}
		}

	},
  },
  mounted(){
	//1.菜单栏切换
	var activeLi=document.querySelectorAll('.nav li');
	var activeDiv=document.querySelectorAll('.tab-pane');
	// var _this=this;
	// console.log(activeDiv);
	activeLi.forEach((li,index)=>{
		li.onclick=function(){
			//清除所有li的active类，只添加给添加当前元素
			for(let i=0;i<activeLi.length;i++)
			{
				activeLi[i].classList.remove('active');
				activeDiv[i].classList.remove('active');
			}
			li.classList.add('active');
			activeDiv[index].classList.add('active');
		}
	})
	//2.清除页面元素
	var elements=document.querySelectorAll('.el-remove');
	for(let i=0;i<elements.length;i++)
	{
		elements[i].remove();
	}
	//3.初始化img 跨域污染画布问题

  }
}
</script>

<style>
@import url('./assets/css/app.css');
@import url('./assets/css/zui.min.css');
</style>
